<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.canvasbox {width: 100%;}
		</style>
	</head>
	<body>
	  <div class="canvasbox">
	  	<canvas id="canvas" style="width: 100%;height: 400px;"></canvas>
	  </div>
	  <div><label>时间间隔</label><input id='pertime' type="text" value="1"></div>
	  <div><label>时间间隔</label><input type="text" value="2"></div>
	  <script type="text/javascript">
	  	function getDomById(id){
	  	  return document.getElementById(id);
	  	};
	  	var data = [
	  	  {
	  	    startTime:"00",
	  	    endTime:"06",
	  	    power:70
	  	  },
	  	  {
          startTime:"06",
          endTime:"11",
          power:95
        },
        {
          startTime:"11",
          endTime:"14",
          power:80
        },
        {
          startTime:"14",
          endTime:"18",
          power:75
        },
        {
          startTime:"18",
          endTime:"24",
          power:65
        }
	  	]
	  	window.onload = function(){
	  	  //获取canvas对象
	  	  var canvas = getDomById("canvas");
	  	  //获取canvas对象的宽度
	  	  var canvas_w = canvas.offsetWidth;
	  	  //获取canvas对象的宽度
        var canvas_h = canvas.offsetHeight;
	  	  canvas.setAttribute("width",canvas_w);
	  	  canvas.setAttribute("height",canvas_h);
	  	  //获取canvas对象的上下文
	  	  var ctxt = canvas.getContext('2d');
	  	  
	  	  //浏览器像素比
	  	  var dpr = window.devicePixelRatio;
	  	  //设置画笔填充颜色
        ctxt.strokeStyle = "#000";
        //设置画笔的大小
        ctxt.lineWidth = 1;
        var pertime = getDomById('pertime').value;//选择1、2、3、4
        var _left = 40;
        var _oldTop = 40;
        var timecount = 24 / pertime;
        var pertime_step = Math.floor((canvas_w - 2*_left) / (24 / pertime));
        var power_step = Math.floor((canvas_h - 2*_oldTop) / 7) ;
        var _top = canvas_h - _oldTop - 7 * power_step;
        console.log(_top)
        //半径
        var radius = 5;
        var powerArr = [];
        //y轴坐标
        for (var i = 0;i<7;i++) {
        	powerArr.push({
        	  text:i==0?"0":(i+4)*10+"%",
        	  x:_left+0.5,
        	  //y:canvas_h - _top - power_step * i +0.5
        	  y:canvas_h - _top - power_step * i +0.5
        	});
        }
        console.log(powerArr);
        var pertimeArr = [];
        //x轴坐标
        for (var j = 0;j<=timecount;j++) {
          pertimeArr.push({
            text:(j*pertime<10)?"0"+(j*pertime):(j*pertime),
            x:_left+pertime_step*j+0.5,
            y:canvas_h - _top +0.5
          });
        }
        //清空
        ctxt.clearRect(0,0,canvas_w,canvas_h);
      //  ctxt.fillRect(0,0,canvas_w,canvas_h);
        ctxt.font="10px";
      //  ctxt.fillText("Hello World!",10,50);
        var power_perStep = (5*power_step) / 50;
        var pertime_perStop = (pertimeArr[pertimeArr.length-1].x-_left)/24;
        //画坐标
        drawCoordinate();
        drawBarGraphGray();
        drawBarGraph();
        drapArc();
        function drawCoordinate(){
          //开始绘制路径
          ctxt.beginPath();
          ctxt.moveTo(_left,canvas_h-_top);
          ctxt.lineTo(_left,_top);
          //画y轴坐标线
          for (var i = 0;i<powerArr.length;i++) {
          	ctxt.moveTo(powerArr[i].x,powerArr[i].y);
          	ctxt.lineTo(powerArr[i].x-5,powerArr[i].y);
          	ctxt.fillText(powerArr[i].text,powerArr[i].x-_left,powerArr[i].y+5);
          }
          
          ctxt.moveTo(_left,canvas_h-_top);
          ctxt.lineTo(canvas_w-_left,canvas_h-_top);
          
          //画x轴坐标线
          for (var j = 0;j<pertimeArr.length;j++) {
            ctxt.moveTo(pertimeArr[j].x,pertimeArr[j].y);
            ctxt.lineTo(pertimeArr[j].x,pertimeArr[j].y+5);
            ctxt.fillText(pertimeArr[j].text,pertimeArr[j].x-8,pertimeArr[j].y+20);
          }
          
          ctxt.closePath();
          ctxt.stroke();
        }
        
        function drawBarGraphGray(){
          //画50%的灰度区域
          ctxt.beginPath();
          ctxt.strokeStyle = "#ccc";
          ctxt.fillStyle = "#ccc";
          ctxt.moveTo(_left,canvas_h-_top);
          ctxt.lineTo(_left,powerArr[0].y-_top);
          ctxt.lineTo(pertimeArr[pertimeArr.length-1].x,powerArr[0].y-_top);
          ctxt.lineTo(pertimeArr[pertimeArr.length-1].x,canvas_h-_top);
          ctxt.closePath();
          ctxt.fill();
        }
        
        function drawBarGraph(){
          //画主体控制区域
          ctxt.beginPath();
          //设置填充渐变颜色
          var my_gradient=ctxt.createLinearGradient(0,_top,0,canvas_h-_top);
          my_gradient.addColorStop(0,"#FE3A00");
          my_gradient.addColorStop(1,"#EACF43");
          ctxt.fillStyle=my_gradient;
          ctxt.strokeStyle = "transparent";
          
         /* data[0].power = 70;
          data[1].power = 80;
          data[2].power = 90;
          data[3].power = 100;
          data[4].power = 60;*/
          for (var i=0;i<data.length;i++) {
            if(i==0){
              ctxt.moveTo(_left,canvas_h - _top - power_step - (data[i].power-50)*power_perStep);
              ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h - _top - power_step - (data[i].power-50)*power_perStep);
              ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h - _top - power_step - (data[i+1].power-50)*power_perStep);
            }else if(i==data.length-1){
              ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h - _top - power_step - (data[i].power-50)*power_perStep);
              ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+powerArr[2].y);
              ctxt.lineTo(_left,_top+powerArr[2].y);
            }else{
               ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h - _top - power_step - (data[i].power-50)*power_perStep);
               ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h - _top - power_step - (data[i+1].power-50)*power_perStep);
            }
          }
            ctxt.fill()
            ctxt.stroke();
            ctxt.closePath();
        };
        
        function drapArc(){
          //画主体控制区域
          ctxt.strokeStyle = "transparent";
          ctxt.fillStyle = "#56D344"
          for (var i=0;i<data.length;i++) {
            ctxt.beginPath();
            ctxt.arc(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h - _top - power_step - (data[i].power-50)*power_perStep,radius,0,2*Math.PI);
            console.log(data[i])
            ctxt.fill();
            ctxt.stroke();
            ctxt.closePath();
          }
        }
        
        return;
        //设置填充渐变颜色
        var my_gradient=ctxt.createLinearGradient(0,_top,0,canvas_h-_top);
          my_gradient.addColorStop(0,"#F00");
          my_gradient.addColorStop(1,"#FFD300");
          ctxt.fillStyle=my_gradient;
     //   ctxt.fillRect(_left,powerArr[powerArr.length-1].y,pertimeArr[pertimeArr.length-1].x-_left,canvas_h-powerArr[powerArr.length-1].y-_top);
        var power_perStep = (canvas_h-powerArr[powerArr.length-1].y-_top) / 100;
        var pertime_perStop = (pertimeArr[pertimeArr.length-1].x-_left)/24;
        
        //绘制路径
          ctxt.beginPath();
      ctxt.strokeStyle = "transparent"
      for (var i=0;i<data.length;i++) {
      	if(i==0){
      	  ctxt.moveTo(_left,_top+(150-data[i].power)*power_perStep);
      	  ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+(150-data[i].power)*power_perStep);
          ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+(150-data[i+1].power)*power_perStep);
      	}else if(i==data.length-1){
      	  ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+(150-data[i].power)*power_perStep);
      	  ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,canvas_h-_top);
          ctxt.lineTo(_left,canvas_h-_top);
      	}else{
      	   ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+(150-data[i].power)*power_perStep);
           ctxt.lineTo(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+(150-data[i+1].power)*power_perStep);
      	}
      }
        ctxt.fill()
         ctxt.stroke();
      //画圆
      
      ctxt.strokeStyle = "transparent";
      ctxt.fillStyle = "#360"
        for (var i=0;i<data.length;i++) {
          ctxt.beginPath();
          ctxt.arc(_left+(parseInt(data[i].endTime))*pertime_perStop,_top+(150-data[i].power)*power_perStep,radius,0,2*Math.PI);
          ctxt.fill();
          ctxt.closePath();
          ctxt.stroke();
        }
        

           var c=document.getElementById("myCanvas");
          var ctx=c.getContext("2d");
          ctx.beginPath();
          ctx.arc(100,75,50,0,2*Math.PI);
          ctx.stroke();
        return;
        //开始绘制路径
        ctxt.beginPath();
        ctxt.moveTo(_left+0.5,canvas_h-_top+0.5);
        ctxt.lineTo(100.5,100.5);
        ctxt.lineTo(300.5,300.5);
        ctxt.closePath();
       // ctxt.lineTo(x,y);
        ctxt.stroke();
        
        
        
	  	}
	  	
	  	;(function(win){
	  	  var Canvas = function(a){
	  	    if(!a.canvasId){
	  	      return ;
	  	    }
	  	    this.can = this.getDomById("canvas");
	  	    console.log(this.can)
	  	    if(!this.can){
	  	      return;
	  	    }
	  	    a = a || {};
	  	    this.config = {
	  	      "isGradient" : a.canvasId,
	  	      "isGradient" : a.isGradient || false
	  	    }
	  	    this.parm = {};//存储canvas的参数
	  	    this.parm.width = this.can.offsetWidth;
	  	    this.parm.Height = this.can.offsetHeight;
	  	    this.parm.ctxt = this.can.getContext('2d');
	  	    
	  	    if(this.config.isGradient){
	  	      //设置填充渐变颜色
	  	      var my_gradient=ctxt.createLinearGradient(0,0,0,170);
            my_gradient.addColorStop(0,"#F00");
            my_gradient.addColorStop(1,"#FFD300");
            this.parm.fillStyle=my_gradient;
	  	    }else{
	  	      this.parm.fillStyle = "#000";
	  	    }
	  	    this.parm.lineWidth = 1;
	  	  }
	  	  Canvas.prototype = {
	  	    getDomById:function(id){
	  	      return document.getElementById(id);
	  	    }
	  	  }
	  	  new Canvas({
	  	    canvasId:"canvas"
	  	  });
	  	})(window);
	  </script>
	</body>
</html>
